<template>
    <div class="common-chart" :style="{ 'height': options.chartHeight + 'px' }" :id="id" v-loading="options.isLoading" v-if="options"></div>
</template>

<script>
    import echarts from 'echarts'

    import { mapState } from 'vuex'
    import { changeWindowSize } from 'util'

    export default {
        name: 'CommonChart',
        props: {
            id: {
                type: String,
                default:''
            },
            options: {
                type: Object,
                required: true
            }
        },
        data () {
            return {
                chart: null
            }
        },
        computed: {},
        watch: {
            'options.isInit': {
                handler(n, o) {
                    if(n) {
                        this.$nextTick(() => {
                            this.initCommonChart()
                        })
                    }
                },
                immediate: true
            }
        },
        methods: {
            // 初始化 - commonChart
            initCommonChart() {
                this.chart = echarts.init(document.getElementById(this.id))
                this.chart.setOption(this.options.option)
                this.chart.resize()
            }
        },
        mounted () {
            this.initCommonChart()

            changeWindowSize(() => {
                this.chart.resize()
            })
        }
    }
</script>

<style scoped>
    .common-chart {
        width: 100%;
        flex: 1;
        border-bottom: 1px solid #ebeef5
    }
</style>
